<template>
  <div>
    <Card dis-hover>
      <Row style="margin-bottom: 10px;">
        <Col span="24" style="text-align: right;">
          <Button @click="verify" icon="md-hammer" type="primary" style="margin-right: 10px;"
                  v-if="$route.params.which==='backlog' && hasPermission('Pages.FlowInstances.Verify')">处理
          </Button>
          <Button @click="recall" icon="md-undo" type="primary" style="margin-right: 10px;"
                  v-if="$route.params.which==='launch' && instance.state===0 && instance.historyCount===0 && hasPermission('Pages.FlowInstances.Recall')">召回
          </Button>
          <Button @click="restart" icon="md-refresh" type="primary" style="margin-right: 10px;"
                  v-if="($route.params.which==='draft' || instance.activityNodeType==='start') && hasPermission('Pages.FlowInstances.Restart')">重启
          </Button>
          <Button @click="displayFlowScheme" icon="md-git-network" type="warning" style="margin-right:10px;">流程图
          </Button>
          <Button @click="displayFlowTransition" icon="md-options" type="info">流转记录</Button>
        </Col>
      </Row>
      <Card dis-hover style="background-color:#f8f8f9;">
        <Row>
          <Col span="6" style="font-size:16px;"><span style="font-weight: bolder;">流程名称：</span>{{ instance.name }}</Col>
          <Col span="6" style="font-size:16px;"><span style="font-weight: bolder;">创建用户：</span>{{ instance.creationFullName }}</Col>
          <Col span="6" style="font-size:16px;"><span style="font-weight:bolder;">创建时间：</span>{{ instance.creationTime | formatTime }}</Col>
          <Col span="6" style="font-size:16px;"><span style="font-weight: bolder;">当前节点：</span>{{ instance.activityNodeName }}</Col>
        </Row>
        <Row style="margin-top:10px;">
          <Col span="24">
            <span style="font-weight: bolder;font-size:16px;">流程描述：</span>
            <span v-html="instance.description?instance.description.replace(/\n/g,'<br>'):''"></span>
          </Col>
        </Row>
      </Card>
      <Divider>流程数据</Divider>
      <Card dis-hover style="margin-top:10px;">
        <form-build ref="form0" :form-template="JSON.parse(instance.formSchemeContent)" :models="JSON.parse(instance.formData)" :disabled="true" :render-preview="true"
                    v-if="instance.formType===0"></form-build>
        <component ref="form1" :is="instance.formSchemeContent + 'Render'" v-if="instance.formType===1" :data="JSON.parse(instance.formData)"></component>
      </Card>
    </Card>
    <flow-scheme-modal v-if="flowSchemeModalMount" v-model="flowSchemeModalShow"
                       :modal-data="flowSchemeModalData"></flow-scheme-modal>
    <verify-modal v-if="verifyModalMount" v-model="verifyModalShow"
                  :modal-data="verifyModalData" @on-submit="verifySubmit"></verify-modal>
    <allot-modal type="detail" v-if="allotModalMount" v-model="allotModalShow" :modal-data="allotModalData"
                 @on-submit="allotSubmit"></allot-modal>
    <Drawer title="流转记录" v-model="drawer2" width="20" :scrollable="true">
      <Timeline>
        <TimelineItem v-for="item in histories" :key="item.id">
          <Icon type="pandx fa fa-clock-o" slot="dot" v-if="item.operation==='被暂存'"></Icon>
          <Icon type="pandx fa fa-repeat" slot="dot" v-if="item.operation==='重启动'"></Icon>
          <Icon type="pandx fa fa-play" slot="dot" v-if="item.operation==='新创建'"></Icon>
          <Icon type="pandx fa fa-check" slot="dot" v-if="item.operation==='已同意'"></Icon>
          <Icon type="pandx fa fa-reply" slot="dot" v-if="item.operation==='被驳回'"></Icon>
          <Icon type="pandx fa fa-bomb" slot="dot" v-if="item.operation==='被拒绝'"></Icon>
          <Icon type="pandx fa fa-stop" slot="dot" v-if="item.operation==='已结束'"></Icon>
          <Icon type="pandx fa fa-arrow-left" slot="dot" v-if="item.operation==='被召回'"></Icon>
          <Card>
            <Row>
              <Col span="8">
                <a href="javascript:void(0);">{{ item.creationFullName }}</a>
              </Col>
              <Col span="8" style="text-align: center;color:#c5c8ce;">
                <Time :time="(new Date(item.creationTime)).getTime()"></Time>
              </Col>
              <Col span="8" style="text-align: right;font-weight:bolder;">
                <span style="color:#19be6b;" v-if="item.signState===1">{{ item.operation }}</span>
                <span style="color:#ed4014;" v-else-if="item.signState===2">{{ item.operation }}</span>
                <span style="color:#ff9900;" v-else-if="item.signState===3">{{ item.operation }}</span>
                <span v-else>{{ item.operation }}</span>
              </Col>
            </Row>
            <Row style="margin-top:6px;">
              <Col span="24">
                <span v-html="item.description?item.description.replace(/\n/g,'<br>'):''"></span>
              </Col>
            </Row>
            <Row style="margin-top:6px;">
              <Col span="24" style="color:#c5c8ce;">
                {{ item.creationTime | formatTime }}
              </Col>
            </Row>
          </Card>
        </TimelineItem>
      </Timeline>
    </Drawer>
  </div>
</template>

<script lang="ts">
import {Component, Vue, Prop, Watch, Emit} from 'vue-property-decorator';
import AbpBase from '@/lib/abpbase';
import FlowSchemeModal from '@/components/common-modal/flow-scheme-modal.vue';
import VerifyModal from '@/views/flow/flow-instance/modal/verify-modal.vue';
import Util from '@/lib/util';
import AllotModal from '@/views/flow/flow-instance/modal/allot-modal.vue';
import FlowAreaViewOnly from '@/components/flow/flow-area-view-only.vue';
import AllotWithInstanceId from '@/store/entities/flow/flow-instance/allot-with-instance-id';

@Component({
  components: { VerifyModal, FlowSchemeModal, AllotModal, FlowAreaViewOnly},
})
export default class FlowInstanceDetail extends AbpBase {
  name: string = 'FlowInstanceDetail';
  data:any={};

  flowSchemeModalMount: boolean = false;
  flowSchemeModalShow: boolean = false;
  flowSchemeModalData: any = {};

  verifyModalMount: boolean = false;
  verifyModalShow: boolean = false;
  verifyModalData: any = {};

  allotModalMount: boolean = false;
  allotModalShow: boolean = false;
  allotModalData: any = {};

  drawer2: boolean = false;
  drawer1: boolean = false;
  colors = ['blue', 'green', 'red', 'orange'];


  get instance() {
    console.log('instance',this.$store.state.flowInstance.instanceForVerify);
    return this.$store.state.flowInstance.instanceForVerify;
  }

  get histories() {
        return this.$store.state.flowInstance.operationHistories;
  }


  async recall(){
    await this.$store.dispatch({
      type:'flowInstance/recallFlowInstance',
      data:{
        id:this.instance.id,
      }
    });
    this.$Message.success({
      background:true,
      content:'流程 ' + this.instance.name + ' 已成功召回',
    });

    Util.closePage(this,'flow-instance-detail');
    this.$router.push({name:'draft'});

  }

  async restart(row: any) {
    Util.addOther(this, 'flow-instance-insert', {which: this.instance.state, id: this.instance.id});
  }

  verify() {
    this.verifyModalData = {instance: this.instance};
    this.verifyModalMount = true;
    this.$nextTick(() => {
      this.verifyModalShow = true;
    });
  }

  displayFlowScheme() {
    this.flowSchemeModalData = {
      flowScheme: {
        schemeContent: this.instance.flowSchemeContent,
        schemeName: this.instance.flowSchemeName
      }, type: 'detail'
    };
    this.flowSchemeModalMount = true;
    this.$nextTick(() => {
      this.flowSchemeModalShow = true;
    });
  }

  async displayFlowTransition() {
    await this.$store.dispatch({
      type: 'flowInstance/getFlowOperationHistories',
      data: {
        id: this.instance.id,
      },
    });
    this.$nextTick(() => {
      this.drawer2 = true;
    });
  }

  verifySubmit(value: boolean, verify?: AllotWithInstanceId, info?: any) {
    if (value) {
      Util.closePage(this, 'flow-instance-detail');
      this.$router.push({name: 'finished'});
    } else {
      this.allotModalData = {instance: verify, info: info,creator:this.instance.creatorUserId};
      this.allotModalMount = true;
      this.$nextTick(() => {
        this.allotModalShow = true;
      });
    }
  }

  allotSubmit(value: boolean) {
    if (value) {
      Util.closePage(this, 'flow-instance-detail');
      this.$router.push({name: 'finished'});
    }
  }

  async created() {
    await this.$store.dispatch({
      type: 'flowInstance/getFlowInstanceForVerify',
      data: {
        id: this.$route.params.id,
      },
    });
    }
}
</script>

<style lang="less" scoped>
</style>

